import React, {Component} from 'react';
import {
    StyleSheet,  
    View,
    Dimensions
} from 'react-native';
import PropTypes from 'prop-types';
import Color from '../../config/theme/standard/color';

export default class Cell extends Component { 
    constructor(props) {
        super(props);
        this.state = {
            isWideScreen: false // 鸿蒙适配是否宽屏
        }
    }

    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }
    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        if (screenWidth) {
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800
            })
        }
    }

    render() {
        let { proportion,alignment,cellPadding,cellSpacing,cellStyles,containerStyles,children} = this.props;
        let cWidth = Dimensions.get('window').width;
        if (proportion) {
            cWidth = Math.round(cWidth / 12) * proportion;
        } 
        
        
        let alignItems = 'flex-start';
        switch (alignment) { 
            case 'center':
                alignItems = 'center';
                break;
            case 'right':
                alignItems = 'flex-end';
                break;
            default:
                alignItems = 'flex-start';
                break;
        }
        
        let marginVertical = 0;
        switch (cellPadding) { 
            case 'XS':
                marginVertical = 2;
                break;
            case 'S':
                marginVertical = 4;
                break;
            case 'M':
                marginVertical = 6;
                break;
            case 'L':
                marginVertical = 8;
                break;
            case 'XL':
                marginVertical = 10;
                break;
            default:
                marginVertical = 0;
                break;
        }

        let marginHorizontal = 0;
        switch (cellSpacing) { 
            case 'S':
                marginHorizontal = 3;
                break;
            case 'M':
                marginHorizontal = 7;
                break;
            case 'L':
                marginHorizontal = 10;
                break;
            default:
                marginHorizontal = 0;
                break;
        }
        
        const newContainerStyles = { alignItems: alignItems };
        const newCellStyles = { width:cWidth, marginHorizontal:marginHorizontal, marginVertical:marginVertical };
        
        return (
            <View style={[styles.container, newContainerStyles, containerStyles]}>
                <View style={[styles.cell,{width:cWidth}, newCellStyles ,cellStyles]}>{children}</View>
            </View>
        );
    }
}

Cell.propTypes = {
    //占比
    proportion: PropTypes.number,
    //对齐方式
    alignment: PropTypes.string,
    //上下留白
    cellPadding: PropTypes.string,
    //左右留白
    cellSpacing: PropTypes.string,
    //样式
    cellStyles: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]),
    //容器样式
    containerStyles: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]),
}

Cell.defaultProps = {
    proportion: 12,
    alignment: "left",
    cellPadding: "无",
    cellSpacing: "无",
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "column",
        alignItems: "flex-start",
    },
    cell: {
        backgroundColor: Color.cell.background,
        height: 50,
        margin: 0,
        alignItems: "center",
        justifyContent: 'center',
    }

})